{% load tpl_tags %}
{% for order in orders %}
<div class="box">
    <p class="pb-3">订单日期：{{ order.add_date }}</p>
    {% for goods in order.happyshopordersku_set.all %}
    <article class="media">
        <figure class="media-left">
            <p class="image is-96x96">
                <img src="{{ MEDIA_URL }}{{ goods.sku.main_picture }}">
            </p>
        </figure>
        <div class="media-content">
            <h1 class="is-size">
                <a href="{% url 'happy_shop:goods_detail' goods.sku.spu.id %}" target="_blank">
                    {{ goods.sku.spu.title }}
                </a>
            </h1>
            <p class="has-text-grey-light pt-1 pb-1">规格: {{ goods.sku.options.all|join:"," }} </p>
            <p class="has-text-grey-light">
                <span class="pr-4">数量: {{ goods.count }}</span>
                <span>单价: {{ goods.price }}</span>
            </p>

        </div>
        <div class="media-right">
            {% if not goods.is_commented and order.pay_status == 4 %}
            {% comment %} <a @click="isCommentModalActive = true" class=" button is-small is-success is-outlined">去评价</a> {% endcomment %}
            <a href="{% url 'happy_shop:user_orders_sku_detail' goods.id %}" class=" button is-small is-success is-outlined">去评价</a>
            
            {% elif goods.is_commented %}
            <button class="button is-small is-outlined">已评价</button>
            {% endif %}
        </div>
    </article>
    {% comment %} {% include 'happy_shop/comment_modal.html' %} {% endcomment %}
    {% endfor %}
    <div class="is-block has-background-light p-3">
        <div class="is-pulled-left">
            <button class="button is-narrow is-small is-warning is-light has-text-weight-bold">实付：¥{{ order.total_amount }}</button> 
        </div>
        <div class="is-pulled-right">
            {% if order.pay_status == 1 %}
            <a class="button is-small is-info is-outlined" href="{% alipay_url order.order_sn %}" target="_blank">
                <span class="pr-3 pt-1 pl-2">
                    <svg t="1632459990510" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2407" width="32" height="32">
                        <path
                            d="M1023.795 853.64v6.348a163.807 163.807 0 0 1-163.807 163.807h-696.18A163.807 163.807 0 0 1 0 859.988v-696.18A163.807 163.807 0 0 1 163.807 0h696.181a163.807 163.807 0 0 1 163.807 163.807V853.64z"
                            fill="#009FE9" p-id="2408"></path>
                        <path
                            d="M844.836 648.267c-40.952-14.333-95.623-34.809-156.846-57.128a949.058 949.058 0 0 0 90.094-222.573H573.325V307.14h245.711v-43.41l-245.71 2.458V143.33H472.173c-18.223 0-21.704 20.476-21.704 20.476v102.38H204.759v40.952h245.71v61.427H245.712v40.952h409.518a805.522 805.522 0 0 1-64.909 148.246c-128.384-42.795-266.186-77.604-354.233-55.08a213.564 213.564 0 0 0-112.003 63.27c-95.418 116.917-26.21 294.034 175.274 294.034 119.989 0 236.087-67.366 325.771-177.73 134.322 65.932 398.666 176.297 398.666 176.297V701.3s-32.352-4.095-178.96-53.033z m-563.702 144.97c-158.893 0-204.759-124.699-126.336-194.112a191.86 191.86 0 0 1 90.913-46.276c93.575-10.238 189.811 35.629 293.624 86.614-74.941 94.598-166.674 153.774-258.2 153.774z"
                            fill="#FFFFFF" p-id="2409"></path>
                    </svg>
                </span>
                支付宝支付
            </a>
            {% elif order.pay_status == 3 %}
            <a @click="confirmOrders({{order.id}})" class="button is-small is-primary">确认收货</a>
            {% comment %} {% elif order.pay_status == 5 %} {% endcomment %}
            <!-- <span class=" has-text-danger-dark">{{ order.get_pay_status_display }}</span> -->
            {% endif %}
            <button class="button is-small">{{ order.get_pay_status_display }}</button>
            <a href="{% url 'happy_shop:user_orders_detail' order.id %}" class=" button is-small is-primary is-outlined">查看详情</a>
        </div>
        <div class="is-clearfix"></div>
    </div>
</div>
{% endfor %}